<template>
  <div>
    <el-button type="primary" size="small" class="btn" @click="batchExportExcel">批量导出(Excel)</el-button>
    <el-button type="success" size="small" class="btn" @click="chooseExportExcel">选择导出(Excel)</el-button>

    <el-table
      :data="customerList"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="50"/>
      <el-table-column type="index" label="序号" width="65"/>
      <el-table-column property="ownerDo.name" label="负责人" width="100" />
      <el-table-column property="activityDo.name" label="所属活动" :show-overflow-tooltip="true"/>
      <el-table-column label="姓名" :show-overflow-tooltip="true">
        <template #default="scope">
          <a href="javascript:" @click="view(scope.row.id)">{{ scope.row.clueDo.fullName }}</a>
        </template>
      </el-table-column>
      <el-table-column property="appellationDo.typeValue" label="称呼"/>
      <el-table-column property="clueDo.phone" label="手机" width="120"/>
      <el-table-column property="clueDo.weixin" label="微信" width="120"/>
      <el-table-column property="needLoanDo.typeValue" label="是否贷款"/>
      <el-table-column property="intentionStateDo.typeValue" label="意向状态"/>
      <el-table-column property="stateDo.typeValue" label="线索状态"/>
      <el-table-column property="sourceDo.typeValue" label="线索来源"/>
      <el-table-column property="intentionProductDo.name" label="意向产品" :show-overflow-tooltip="true"/>
      <el-table-column property="nextContactTime" label="下次联系时间" width="165"/>
      <el-table-column label="操作" width="85">
        <template #default="scope">
          <el-button type="primary" size="small" @click="view(scope.row.id)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <p>
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :total="total"
        @prev-click="toPage"
        @next-click="toPage"
        @current-change="toPage"
      />
    </p>
  </div>
</template>

<script>
import { doGet } from '../http/httpRequest'
import axios from 'axios'
import { getToken, messageTip } from '../util/util'

export default {
  name: 'CustomerView',
  data() {
    return {
      // 客户列表数据对象
      customerList: [{
        clueDo : {},
        ownerDo : {},
        activityDo : {},
        appellationDo : {},
        needLoanDo : {},
        intentionStateDo : {},
        stateDo : {},
        sourceDo : {},
        intentionProductDo : {},
      }],
      pageSize: 0,
      total: 0,
      // 客户的id数组
      customerIdArray: []
    }
  },
  mounted() {
    this.getData(1)
  },
  methods: {
    getData(current) {
      doGet('/api/customers', {
        current: current
      }).then(resp => {
        if(resp.data.code === 200) {
          this.customerList = resp.data.data.list
          this.pageSize = resp.data.data.pageSize
          this.total = resp.data.data.total
        }
      })
    },
    // 批量导出客户的Excel数据
    batchExportExcel() {
      let token = getToken()
      // 1.向后端发送一个请求
      // let iframe = document.createElement('iframe')
      // iframe.src = axios.defaults.baseURL + '/api/exportExcel?Authorization=' + token
      // // 隐藏iframe框
      // iframe.style.display = 'none'
      // document.body.appendChild(iframe)

      // 2.后端查询数据库的数据,把数据写入Excel,然后把Excel以流的方式输出到前端浏览器

      // 3.前端浏览器弹出一个下载框进行文件下载

      this.exportExcel(null)
    },

    exportExcel(ids) {
      let token = getToken()
      let iframe = document.createElement('iframe')
      if(ids) {
        iframe.src = axios.defaults.baseURL + '/api/exportExcel?Authorization=' + token + '&ids=' + ids
      } else {
        iframe.src = axios.defaults.baseURL + '/api/exportExcel?Authorization=' + token
      }
      // 隐藏iframe框
      iframe.style.display = 'none'
      document.body.appendChild(iframe)
    },

    // 选择导出excel
    chooseExportExcel() {
      if(this.customerIdArray.length <= 0) {
        messageTip('请选择要导出的数据', 'warning')
        return
      }
      let ids = this.customerIdArray.join(',')
      this.exportExcel(ids)
    },
    
    // 勾选数据
    handleSelectionChange(selection) {
      this.customerIdArray = []
      selection.forEach(data => {
        let customerId = data.id
        this.customerIdArray.push(customerId)
      })
    },
    toPage(current) {
      this.getData(current)
    }
  }
}
</script>

<style scoped>
  .el-table {
    margin-top: 15px;
    height: 460px;
  }
</style>